<template>
    <van-picker ref="picker" :columns="columns" show-toolbar  @change="onChange" @cancel="onCancel" @confirm="onConfirm" />
</template>

<script>
import { getProvince, getCity ,getCounty } from '@/api/user'
export default {
    name: "citylist",
    created() {
        this.getProvince()
    },
    data() {
        return{
            curProvince : '',
            curCity: '',
            curCountry: '',
            provincelist: [],
            cityList: [],
            countyList: [],
            columns: [
                {
                    values: [],
                },
                {
                    values: [],
                },
                {
                    values: [],
                },
                {
                    values: [],
                }
            ]
        }
    },
    methods:{
        onConfirm(value, index) {
            this.$emit('confirm',value)
        },
        onCancel() {
            this.$emit('cancel')
        },
        onChange(picker, value, index) {
            if(value[0].id){
                if(this.curProvince !== value[0].id){
                    this.getCityList(value[0].id)
                    this.curProvince = value[0].id
                }
            }
            if(value[1].id){
                if(this.curCity !== value[1].id){
                    this.getCountyList(value[1].id)
                    this.curCity = value[1].id
                }
            }
            if(value[2].id){
                if(this.curCountry !== value[2].id){
                    this.getTownList(value[2].id)
                    this.curCountry = value[2].id
                }
            }
        },
        getProvince() {
            getProvince().then(response => {
                const data = response.data
                const province = []
                var i = 0
                for (const item of data) {
                    const temp = {}
                    temp.id = item.agency_id
                    temp.text  = item.name
                    province.push(temp)
                    if(i === 0){
                        this.getCityList(item.agency_id)
                    }
                    i = i + 1
                }
                this.provincelist = province
                this.$refs.picker.setColumnValues(0, province)
            })
        },
        getCityList(id) {
            const data = {}
            data.parentId = id
            getCity(data).then(response => {
                const data = response.data
                const city = []
                var i = 0
                for (const item of data) {
                    const temp = {}
                    temp.id = item.agency_id
                    temp.text  = item.name
                    city.push(temp)
                    // if(data.length === 1){
                    //     this.getCountyList(item.agency_id)
                    // }
                    if(i === 0){
                        this.getCountyList(item.agency_id)
                    }
                    i = i + 1
                }
                this.cityList = city
                this.$refs.picker.setColumnValues(1, city)
            })
        },
        getCountyList(id) {
            const data = {}
            data.parentId = id
            getCity(data).then(response => {
                const data = response.data
                const county = []
                var i = 0
                for (const item of data) {
                    const temp = {}
                    temp.id = item.agency_id
                    temp.text  = item.name
                    county.push(temp)
                    if(i === 0){
                        this.getTownList(item.agency_id)
                    }
                    i = i + 1
                }
                this.countyList = county
                this.$refs.picker.setColumnValues(2, county)
            })
        },
        getTownList(id) {
            const data = {}
            data.parentId = id
            getCity(data).then(response => {
                const data = response.data
                const town = []
                for (const item of data) {
                    const temp = {}
                    temp.id = item.agency_id
                    temp.text  = item.name
                    town.push(temp)
                }
                this.townList = town
                this.$refs.picker.setColumnValues(3, town)
            })
        }
    }
}
</script>

<style scoped>

</style>